<template>
	<view class="container">
		<view class="question">
			<view class="question-title">
				<view class="title"> 
					【{{ qurstion.question_type_text }}】 
					<view v-html="title"></view>
				</view>
			</view>
			<view class="options-container">
				<view v-for="(option, idx) in options" :key="idx" class="option-item" :class="{ selected: isOptionSelected(idx) }" @click="handleSelect(idx)">
					<view class="option-circle"></view>
					<text class="option-text">{{ option }}</text>
				</view>
				<textarea v-if="qurstion.question_type == 3" v-model="userAnswers" @input="changeVal()" class="answerarea" placeholder="请输入答题内容" />
			</view>
			<view class="analysis" v-if="analysisShow">
				<view class="tages" v-if="answerStatus">
					<image src="/static/dui.png"></image>
					<text>回答正确</text>
				</view>
				<view class="tages" v-if="!answerStatus">
					<image src="/static/cuowu.png"></image>
					<text>回答错误</text>
				</view>
				<view class="answers">
					<view class="tt"> 
						<text>答案</text>
						<view class="lines"> </view>
					</view>
					<view class="tta"> {{ qurstion.question_answer }} </view>
				</view>
				<view class="jiexi">
					<view class="tt"> 
						<text>解析</text>
						<view class="lines"> </view>
					</view>
					<view v-html="qurstion.question_analysis" class="tta" @tap="handleImageClick"></view>
				</view>
			</view>
			<view style="height: 200rpx;width: 100%;"> </view>
			<view class="bottom">
				<view class="icons" @click="submitAnswers"> 提交 </view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userAnswers: [],
				baseURL: getApp().globalData.baseUrl,
				appid: uni.getStorageSync('appid'),
				options: '',
				qurstion: '',
				analysisShow: false,
				answerStatus: false,
				answer: '',
				title: '',
				ans: '',
			};
		},
		methods: {
			// 选项选择处理
			handleSelect(key) {
				if (this.qurstion.question_type === 1) {
					this.userAnswers = [key];
				} else if(  this.qurstion.question_type === 2 ) {
					const index = this.userAnswers.indexOf(key);
					if (index > -1) {
						this.userAnswers.splice(index, 1);
					} else {
						this.userAnswers.push(key);
					}
				}
				this.matchAns()
			},
			// 判断选项是否选中
			isOptionSelected(key) {
				return this.userAnswers.includes(key);
			},
			matchAns(){
				this.ans = ''
				if( this.qurstion.question_type == 2 ){
					var options = this.qurstion.content_format
					var ans1 =  this.userAnswers
					for(var j=0;j<ans1.length;j++){
						if( j == ans1.length - 1 ){
							this.ans += options[ans1[j]].split(':')[0]
						} else {
							this.ans += options[ans1[j]].split(':')[0] + ','
						}
					}
				} else if( this.qurstion.question_type == 3 ) {
					this.ans = this.userAnswers
				} else {
					this.ans = this.qurstion.content_format[this.userAnswers].split(':')[0]
				}
				var answer  =  ''
				if( this.qurstion.question_type != 3 ){
					answer  =  this.qurstion.question_answer.split('，').join(',')
					this.analysisShow = true
				} else {
					answer  =  this.qurstion.question_answer
				}
				if( answer ==  this.ans ){
					this.answerStatus = true
				} else {
					this.answerStatus = false
				}
			},
			changeVal(item){
				this.userAnswers = this.answer;
			},
			// 提交答案
			submitAnswers() {
				var data = {
					answer: this.ans,
					paper_question_id: this.qurstion.paper_question_id,
					appid: this.appid,
				}
				uni.request({
					url: this.baseURL + '/api/paper/answer',
					method: 'POST',
					data: data,
					header: { 'Content-Type': 'application/json' },
					success: (res) => { 
						uni.showToast({ title: '答题成功！' });
						setTimeout(function(){
							uni.navigateTo({url: '/pages/question/cuoti'})
						},500)
					},
					fail: (err) => {
						console.error('请求失败:', err);
					}
				})
			},
			processHtmlImages(html) {
				let processed = html.replace(/<img[^>]*>/gi, match => {
					return match
						.replace(/(width|height|style)=["'][^"']*["']/gi, '')
						.replace(/(<img)/, '$1 @click="prviewImage(this)" style="max-width:100%!important;height:auto!important;display:block!important;margin:10rpx auto!important;"');
				});
				processed = html.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, (match, src) => {
					return `<img 
					  style="max-width: 100%;height: auto;display: block;margin: 10px 0;" 
					  data-src="${src}" 
					  class="rich-image" 
					  src="${src}"
					>`
				  })
				processed = processed.replace(/style=(["'])[^"']*?\bwidth:[^;]+;?/gi, 'style=$1max-width:100%!important;');
				return processed;
			},
			handleImageClick() {
				uni.createSelectorQuery().selectAll('.analysis img') .fields({  dataset: true,src: true }, (res) => {
					const imgUrls =  res.map(item => item.dataset.src).filter(src => src != null && src !== '');
					if( imgUrls.length > 0 ){
						uni.previewImage({
							urls: imgUrls,
							longPressActions: {  
						        itemList: ['保存图片', '分享'],
						        success: (res) => {
									console.log(`选中操作: ${res.tapIndex}`);
						        }
							}
						});
					}
				}).exec();
			}
		},
		onLoad(options) {
			var timu  = uni.getStorageSync('timu')
			this.title = timu.question_title
			this.options = timu.content_format
			this.qurstion = timu
			if( this.qurstion.question_answer == this.qurstion.paper_answer ){
				this.answerStatus = true
			} else {
				this.answerStatus = false
			}
			this.userAnswers = this.qurstion.paper_answer
			var ans  = ''
			var options = this.qurstion.content_format
			this.qurstion.question_analysis  = this.processHtmlImages(this.qurstion.question_analysis)
			if( this.qurstion.type == 2 ){
				for( var i=0;i<options.length;i++ ){
					var a1 = options[i].split(':')[0]
					if( a1 == this.userAnswers ){
						this.userAnswers[this.currentIndex].push(i);
					}
				}
				
			}else {
				for( var i=0;i<options.length;i++ ){
					var a1 = options[i].split(':')[0]
					if( a1 == this.userAnswers ){
						this.userAnswers = [i]
					}
				}
			}
		},
	};
</script>

<style>
	.container {height: 100vh;display: flex;flex-direction: column;background-color: #f5f5f5;}
	.nav-bar {padding: 20rpx 20rpx 10rpx 20rpx;background: #fff;text-align: center;border-bottom: 1rpx solid #eee;}
	.nav-bar .title {font-size: 30rpx;color: #3C3C3C;width: 100%;display: block;}
	.nav-bar .current {font-size: 26rpx;color: #989898;}
	.question{width: 100%;background: #fff;height: 100%;}
	.question-title{width: 100%;display: flex;flex-direction: row;padding: 20rpx 0 20rpx 0;}
	.question-title .nums{width: 30rpx;height: 35rpx;background: #EB6E30;color: #fff;line-height: 40rpx;text-align: center;border-radius: 3rpx;font-size: 26rpx;margin-left: 10rpx;margin-top: 5rpx;}
	.question-title .title{font-size: 28rpx;margin-left: 10rpx;display: flex;flex-direction: row;}
	.options{width: 90%;margin: 0 auto;}
	.options-radio{width: 90%;height: 80rpx;border: 1rpx solid #989898;border-radius: 2rpx;margin-top: 10rpx;margin-left: 10rpx;padding-left: 10rpx;}
	.analysis{width: 90%;margin: 0 auto;box-shadow: 0 10rpx 10rpx 0 #efefef;margin-top: 100rpx;border-radius: 10rpx;border: 1rpx solid #989898;position: relative;padding-bottom: 30rpx;overflow-x: hidden;}
	.tages{width: 200rpx;position: absolute;right: -10rpx;top: 20rpx;height: 60rpx;}
	.tages image{width: 100%;height: 100%;}
	.tages text{width: 100%;text-align: center;position: absolute;top: 0;display: block;color: #fff;font-size: 26rpx;line-height: 60rpx;}
	.answers{width: 100%;padding: 40rpx;display: flex;flex-direction: row;}
	.tt{position: relative;width: 80rpx;line-height: 40rpx;}
	.tt text{font-size: 34rpx;font-weight: bold;color: #10756A;position: absolute;left: 0;}
	.tt .lines{background:#63EFE2;height: 5rpx;width: 60rpx;position: absolute;left: 5rpx;top: 35rpx;opacity: .6;}
	.jiexi{width: 100%;padding: 0rpx 40rpx 40rpx 40rpx;display: flex;flex-direction: row;}
	.tta{font-size: 28rpx;color: #3C3C3C;width: 70%;}
	.bottom{width: 100%;position: fixed;height: 140rpx;bottom: 0;left: 0;display: flex;flex-direction: row;justify-content: space-around;padding-top: 20rpx;border-top: 1rpx solid #989898;background: #fff;}
	.bottom .icons{width: 40%;height: 70rpx;background: #EB6E30;border-radius: 70rpx;margin: 0 auto;color: #fff;text-align: center;font-size: 30rpx;line-height: 70rpx;}
	.bottom .icons image{width: 50rpx;height: 50rpx;display: block;margin: 0 auto;}
	.bottom .icons text{text-align: center;font-size: 26rpx;color: #3C3C3C;padding-top: 10rpx;}
	.options-container {margin-top: 20rpx;width: 90%;margin: 0 auto;}
	.option-item {display: flex;align-items: center;padding: 25rpx;margin-bottom: 20rpx;border: 1rpx solid #eee;border-radius: 12rpx;background: #fff;flex-direction: row;}
	.option-item.selected {border-color: #07c160;background: rgba(7, 193, 96, 0.05);}
	.option-circle {min-width: 40rpx;height: 40rpx;border: 2rpx solid #ddd;border-radius: 50%;margin-right: 20rpx;}
	.option-item.selected .option-circle {border-color: #07c160;background: #07c160;}
	.option-text {font-size: 30rpx;color: #333;}
	textarea{border: 1rpx solid #BEBEBE;padding: 20rpx;border-radius: 5rpx;width: 90%;margin: 0 auto;}
</style>